<template>
    <el-row class="main-cont padd20">
        <el-row>
            <el-col class="title box box-pack-between box-align-center">
                <el-page-header @back="$router.go(-1)" content="证书模板">
                </el-page-header>
                <div class="btn">
                    <el-button class="reset-comfirm-btn" @click="openPopup">+添加证书模板</el-button>
                </div>
            </el-col>
        </el-row>

        <el-row class="mt20">
            <el-col>
                <el-table :data="zsList" stripe style="width: 100%"
                    :header-cell-style="{background:'#F0F1F8', color:'#2F3142'}" border>
                    <el-table-column type="index" label="序号" width="100" align="center"></el-table-column>
                    <el-table-column prop="name" label="证书名称" min-width="200" align="center"></el-table-column>
                    <!-- <el-table-column label="版式" width="100" align="center">
                        <template slot-scope="scope">
                            <span v-if="scope.row.style==1">横版</span>
                            <span v-if="scope.row.style==2">竖版</span>
                        </template>
                    </el-table-column> -->
                    <el-table-column label="类型" width="150" align="center">
                        <template slot-scope="scope">
                            <span v-if="scope.row.type==1">结课</span>
                            <span v-if="scope.row.type==2">打卡</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="createUserName" label="作者" width="220" align="center"></el-table-column>
                    <el-table-column label="操作" width="220" align="center">
                        <template slot-scope="scope">
                            <el-link :underline="false" @click="handleUpdate(scope.row)" class="mr10">修改</el-link>
                            <el-link :underline="false" @click="handlePreview(scope.row)" class="mr10">预览</el-link>
                            <el-link :underline="false" style="color: red;" @click="changeStatus(scope.row)">删除
                            </el-link>
                        </template>
                    </el-table-column>
                </el-table>
            </el-col>
        </el-row>
        <add-zs :dialogVisible="tkzt" @closeTk="closeTk" @updateList="getCertData()" :title="title" ref="child" :info="info">
        </add-zs>
        <previewZs :dialogVisible="preview" @closePreview="closePreview" ref="child1" :info="info"></previewZs>
    </el-row>
</template>

<script>
    import addZs from './components/zsdialog.vue';
    import previewZs from './components/preview.vue';

    export default {
        components: {
            addZs,
            previewZs
        },
        data() {
            return {
                zsList: [],
                tkzt: false,
                preview: false,
                selectVal: '',
                searchText: '',
                title: '添加证书',
                schoolid: this.$store.state.schoolId,
                info: {}
            };
        },
        mounted() {
            this.getCertData();
        },
        methods: {
            tableRowClassName({
                row,
                rowIndex
            }) {
                if (rowIndex === 1) {
                    return 'warning-row';
                } else if (rowIndex === 3) {
                    return 'success-row';
                }
                return '';
            },
            closeTk() {
                this.tkzt = false;
            },
            closePreview() {
                this.preview = false
            },

            openPopup() {
                this.tkzt = true
                this.$refs.child.preview()
            },
            getCertData() {
                var params = {
                    schoolid: this.schoolid
                };
                this.$api.Admin.getCertData(params).then(res => {
                    if (res.code == '0') {
                        this.zsList = res.list;
                        console.log(this.zsList)
                    } else {
                        this.$message.error('请求失败！');
                    }
                })
            },
            changeStatus(row) {
                this.$confirm('确认删除吗?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.$ajax.post('/ycert/delete', {
                        id: row.id
                    }).then(res => {
                        if (res.code == "0") {
                            this.$message({
                                type: 'success',
                                message: '已删除'
                            });
                            this.getCertData();
                        }else{
                            this.$message({
                                type: 'error',
                                message: res.msg
                            });
                        }
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消操作'
                    });
                });
            },
            handlePreview(item) {
                console.log(item);
                this.info = item
                this.preview = true
                this.$refs.child1.preview()
                // this.$refs.child1.setInfo()
            },
            handleUpdate(item){
                console.log(item);
                this.info = item
                this.tkzt = true
                this.$refs.child.setInfo()
            }
        }
    }
</script>

<style>
    .el-table .warning-row {
        background: oldlace;
    }

    .el-table .success-row {
        background: #f0f9eb;
    }
</style>
